<template>
  <view class="tooltipWindos">
    <view class="invertedTriangle mainTriangle"></view>
    <view class="invertedTriangle backgroundTriangle"></view>
    <text>{{tipTxt}}</text>
  </view> 
</template>

<script setup name="BottomDrawer">
import { onLaunch, onShow, onHide, onUnload } from "@dcloudio/uni-app";
import { reactive, ref, toRefs, watch, onMounted, getCurrentInstance } from "vue"
import { storeToRefs } from "pinia";
import { useRunInfoStore } from "../../store/runInfo";
const useRunInfoData = useRunInfoStore()
const { proportionShow, initStatus, timerNum, centerDistance, runType } = storeToRefs(useRunInfoData)
const appInstance = getCurrentInstance().proxy
const props = defineProps({
  tipTxt: {
    type: String,
    default: "请阅读并勾选用户协议"
  }
})

const { tipTxt }  = toRefs(props)

const state = reactive({

})

const alertDialogRef = ref(null)


onMounted(() => {
  
})

onShow(() => {
 
})

onUnload(() => {

})

watch(() => initStatus.value, (newValue, oldValue) => {

}, {imediate: true})

</script>

<style lang="scss">
 /*提示窗口样式*/	
.tooltipWindos{
  display: inline-block;
  min-width: 100rpx;
  min-height: 56rpx;
  padding: 10rpx 14rpx;
  background: #060606;
  border-radius: 4rpx;
  opacity: 0.7;
  line-height: 56rpx;
  font-size: 24rpx;
  color: #FFFFFF;
  box-sizing: border-box;
  position: relative;
}
/*倒置三角样式*/
.invertedTriangle{
  width:0; 
  height:0; 
  overflow:hidden; 
  border-width:20rpx; 
  border-style:solid;  
  position:absolute;
  top: 74rpx;
  left: 50%;
  transform: translateX(-50%);
  // margin-left:110px;
}
/*倒置三角中背景三角样式*/
.backgroundTriangle{
  border-color: #060606 transparent transparent;
  position: absolute;
  top: 74rpx;
  left: 50%;
  transform: translateX(-50%);
  // margin-top:99px;
}
/*倒置三角中主三角样式*/
.mainTriangle{
  border-color: red transparent transparent;
  position: absolute;
  top: 74rpx;
  left: 50%;
  transform: translateX(-50%);
  // margin-top:101px;
}
</style>
